<template>
	<div>
		<el-button class="top-left" type="danger" @click="backRoom">返回</el-button>
		<div class="panel">
			<div class="header">
				<div>
					<h2 class="title">{{meetingInfo.meetingName}} </h2>
					<p>{{meetingInfo.beginTime}} 会议号：{{meetingInfo.meetingRoomId}}</p>
					<p>发起人：{{meetingInfo.masterName}}</p>
					<p>参会人员：{{meetingInfo.meetingMembers}}</p>
				</div>

			</div>
			<div class="video-box">
				<div v-for="(item,key) in memberList" :key="key" class="all">
					<p>{{item.nickName}} {{item.phonenumber}}</p>
					<p>{{item.dept.deptName}}</p>
					<div>参会时间：<p>{{meetingInfo.beginTime}}</p>
					</div>
				</div>
			</div>
			<div class="btn-box">
				<el-button type="primary" v-if="recording" @click="viewVideos">查看会议录制</el-button>
				<el-button type="info" v-else>会议未开始云录制</el-button>
				<el-button type="danger" @click="delRoom" style="width: 100px;">删除</el-button>

				<!-- <el-button type="primary" @click="backRoom" style="width: 100px;">返回</el-button> -->
				<div style="width: 100px;"></div>
			</div>
		</div>
		<el-dialog title="会议视频" :visible.sync="isshowvideolist" width="70%">
			<div v-for="(item,key) in videoList" :key="key" class="all">
					<div>
						<a :href="'http://111.43.41.101:8090/videos/' +item.filename" target="_blank">{{item.id}}点击观看</a>
						<el-button type="primary"  @click="downloadVideo(item.filename)"  >点击下载</el-button>
					</div>
 
			</div>
		</el-dialog>
	</div>

</template>

<script>
	 
	import {
		mapGetters
	} from 'vuex'
	import {
		delMeeting,
		getMemberInfo
	} from '@/api/system/meeting'
	export default {
		data() {
			return {
				meetingInfo: {
					status: 0,
					masterId: 0,
					meetingName: "",
					beginTime: "",
					meetingRoomId: "",
					meetingMembers: "",
					fileIds: "",
					streamIds: ""
				},
				recording: false,
				isshowvideolist: false,
				memberList: [],
				videoList: []
			}
		},
		computed: {
			...mapGetters([
				'userId'
			])
		},
		created() {
			this.init()
		},
		methods: {
			downloadVideo(fileName){
				let url = 'http://111.43.41.101:8090/videos/'+fileName
				console.log(url)
				// this.$electron.ipcRenderer.send("downloadVideo",downloadAddress.value+"+"+downloadFolder.value)
				this.$electron.ipcRenderer.send("downloadVideo",url)
			},
			backRoom() {
				this.$router.push({
					path: '/dept',
					query: {
						dept: this.$route.query.dept
					}
				})
			},
			viewVideos() {
				this.isshowvideolist = true

			},
			init() {
				let meetingInfo = this.$route.query.meetingInfo;

				this.meetingInfo = meetingInfo
				console.log(this.meetingInfo)
				let that = this
				if (this.meetingInfo.streamIds) {
					this.recording = true
					let files = this.meetingInfo.fileIds.split(",")
					files.forEach(function(item) {
						that.videoList.push({
							id: item,
							filename: item
						})
					})
				}
				//查询参会人员详细信息
				getMemberInfo(this.meetingInfo.id).then(res => {
					console.log(res)
					this.memberList = res.data
				})
			},
			delRoom() {
				console.log(this.meetingInfo.id)
				delMeeting(this.meetingInfo.id).then((res) => {
					console.log(res);
					this.$message({
						message: "已删除",
						type: "success",
					});
					this.backRoom();
				})
			}

		}
	}
</script>
<style scoped>
	.app-container {}

	.panel {
		margin: 100px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: calc(100vh - 260px);
		background-color: #ffffff;
		overflow-x: hidden;
		border-radius: 20px;
		padding: 30px
	}

	.header {
		display: flex;
		justify-content: space-between;
	}

	.video-box {
		overflow-x: hidden;
		height: 80%;
	}

	.video-box div {
		float: left;
	}

	.video-box .all {
		border: 1px solid #ccc;
		width: calc(20% - 20px);
		margin: 10px;
		padding: 10px 20px;
		border-radius: 10px;
	}

	.video-box .all p {
		margin: 8px 0;
	}

	.btn-box {
		display: flex;
		justify-content: center;
	}

	.top-left {
		position: fixed;
		left: 30px;
		top: 30px;
	}
</style>
